<template>
  <el-dialog
    width="400px"
    :visible.sync="visible"
    title="IP绑定"
    append-to-body
    :before-close="close"
    :close-on-click-modal="false"
  >
    <el-form ref="form" label-width="100px">
      <el-form-item v-for="host in hosts" :key="host.name" :label="host.name">
        <el-input size="mini" v-model="host.ip"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="onSave">保存</el-button>
        <el-button size="mini" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "BindIpDialog",
  data() {
    return {
      department: [],
      hosts: [],
      visible: false,
      isAdd: false, // 是否为添加
    };
  },
  created() {},
  mounted() {},
  methods: {
    open(val) {
      this.hosts = val.host;
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.$emit("close");
    },
    onSave() {
      this.$emit("closeDialog");
      this.close();
    },
    onCancel() {
      this.close();
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  overflow: hidden;
  .item {
    width: 300px;
    margin: 10px;
    float: left;
    .title {
      height: 100%;
      margin-top: 5px;
      float: left;
    }
    .el-input,
    .el-select,
    .el-input-number {
      width: 200px;
      float: right;
    }
  }
}
.foot {
  overflow: hidden;
  .el-button {
    margin: 10px;
    float: right;
  }
}
</style>


